<template>
  <div id="top">
    <div style="height: 600px;overflow: hidden">
    <el-row class="panel-group" :gutter="40">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money" >
            <i class="iconfont icon-liulan" style="font-size: 40px"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日IP：</div>
            <span class="card-panel-num">{{ this.userTodayCount }}</span>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people" >
            <i class="iconfont icon-yonghu" style="font-size: 40px"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">用户数:</div>
            <span class="card-panel-num">{{ this.userTotal }}</span>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message" >
            <i class="iconfont icon-huati" style="font-size: 40px"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">话题数：</div>
            <span class="card-panel-num">{{ this.TopicTotal }}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shoppingCard" >
            <i class="iconfont icon-tiezi" style="font-size: 40px"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">帖子数:</div>
            <span class="card-panel-num">{{ this.inviteTotal }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card style="width: 200px;float: left">
    <div class="topicTop10" style="height: auto;width: 160px;">
      <div class="TopTitle">
        <div>
          热门话题
        </div>
      </div>
  <ul>
    <li v-for="(item,index) in topicList" v-bind:key="index">
      <div class="rankNum1" v-if="index <= 2">{{index + 1}}</div>
      <div class="rankNum2" v-else>{{index + 1}}</div>
      <div class="topic" @click="showTopicInfo(item)">{{item.topicName}}</div>
    </li>
  </ul>
      <!-- 查看帖子详情对话框 -->
      <el-dialog   :visible.sync="disabled" @close="handClose()"  width="800px" :append-to-body="true" :estroy-on-close="true">
        <div class="userInfoHeader">
          <el-avatar class="userIcon" :size="50" :src="topic.topicIcon"></el-avatar>
          <div class="nickname_signature">
            <div class="userNickname"> #{{ topic.topicName}}#</div>
            <div class="userSignature" style="margin-bottom: 10px">话题描述：{{ topic.topicDescr }}</div>
            话题发帖数<i class="iconfont icon-tiezi"> {{topic.inviNum}}</i>
          </div>
          <div class="time">
            <div class="createTime">话题创建时间：{{ topic.createTime }}</div>
            <div class="updateTime">最近更新时间：{{ topic.updateTime }}</div>
          </div>
        </div>
        <div class="userInfoMain">
          <el-tabs class="invitation" type="border-card">
            <el-tab-pane label="帖子">
              <div class="content" v-if="this.invitationListTopic.length>0">
                <div class="invitationContent" v-for="(item,index)  in invitationListTopic" v-bind:key="index">
                  <div class="Col_left" @click="getInvitationInfoDetail(item)">
                    <span class="threadlist_rep_num center_text" title="回复" >{{ item.commentNum }}</span>
                  </div>
                  <div class="Col_mid">
                    <div class="Col_mid_top">
        <span class="Col_mid_top_title">

<!--          <span v-for="(item2,index)  in item.topics" v-bind:key="index">-->
          <!--            <span class="invitationTopic">#{{item2.topicName}}# </span>-->
          <!--          </span>-->
         <span class="inviTitle" @click="getInvitationInfoDetail(item.inviId)">
           {{item.inviTitle}}
         </span>
        </span>
                    </div>
                    <div class="Col_mid_under">
                      <div class="Col_mid_under_invitationContent" @click="getInvitationInfoDetail(item)">
                        {{item.inviContent}}
                      </div>
                      <!--        <div class="Col_mid_under_pic"></div>-->
                      <div class="Col_mid_under_mid">
                        <div class="Col_mid_under_right_zan">
                          <i class="iconfont icon-dianzan">  {{item.agreeNum}}</i><br/>
                          <i class="iconfont icon-liulan">  {{item.browseNum}}</i>
                        </div>
                      </div>
                      <div class="Col_mid_under_right">
                        <span class="Col_mid_under_right_time">{{item.createTime}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="Col_right">
                    <el-tooltip effect="dark" class="deleteInvitation" content="删除帖子" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
                      <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTopic(item.inviId)"></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="tipsNoInvitation" v-else>该话题暂无帖子讨论</div>
              <div class="page">
                <el-pagination
                  @current-change="handleUserInvitationPageCurrentChange"
                  :current-page.sync="things2.page"
                  :page-size="4"
                  layout="total, prev, pager, next"
                  :total="invitationSize">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
      <div style="text-align:center;">
      <div class="toTopicList" @click="toTopicList">
       查看全部话题
      </div>
      </div>
    </div>
    </el-card>
    <div id="main"></div>

    <el-card style="width: 200px;float: right">
      <div class="topicTop10" style="height: auto;width: 160px;">
        <div class="TopTitle">
          <div>
            热门帖子
          </div>
        </div>
        <ul>
          <li v-for="(item,index) in inviList" v-bind:key="index">
            <div class="rankNum1" v-if="index <= 2">{{index + 1}}</div>
            <div class="rankNum2" v-else>{{index + 1}}</div>
            <div class="topic"  @click="getInvitationInfoDetail(item.inviId)">{{item.inviTitle}}</div>
          </li>
        </ul>
        <div style="text-align:center;">
          <div class="toTopicList" @click="toInvitationList">
            查看全部帖子
          </div>
        </div>
      </div>
    </el-card>
    </div>
    <div id="main2"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  ToolboxComponent,
  LegendComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  ToolboxComponent,
  LegendComponent
])

export default {
  data () {
    return {
      disabled: false,
      TopicTotal: 0,
      inviteTotal: 0,
      userTodayCount: 0,
      userTotal: 0,
      topic: {
        createTime: '',
        page: 1,
        pageSize: 10,
        sortOrder: 'invi_num',
        topicDescr: '',
        topicIcon: '',
        topicId: -1,
        topicName: '',
        updateTime: '',
        version: -1
      },
      invitation: {
        agreeNum: -1,
        browseNum: -1,
        buildId: -1,
        commentNum: -1,
        inviContent: '',
        inviTitle: '',
        page: 1,
        pageSize: 10,
        sortOrder: 'comment_num',
        topicList: '',
        userId: -1
      },
      inviList: [],
      topicList: [],
      topicInfo: {
        createTime: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicDescr: '',
        topicIcon: '',
        topicId: -1,
        topicName: '',
        updateTime: '',
        version: -1
      },
      things2: {
        page: 1,
        pageSize: 4,
        sortOrder: 'topic_list',
        thing: '1'
      },
      invitationListTopic: [],
      invitationSize: 0
    }
  },
  methods: {
    draw2 () {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option

      // prettier-ignore
      const data = [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2000-06-12', 68], ['2000-06-13', 92], ['2000-06-14', 130], ['2000-06-15', 245], ['2000-06-16', 139], ['2000-06-17', 115], ['2000-06-18', 111], ['2000-06-19', 309], ['2000-06-20', 206], ['2000-06-21', 137], ['2000-06-22', 128], ['2000-06-23', 85], ['2000-06-24', 94], ['2000-06-25', 71], ['2000-06-26', 106], ['2000-06-27', 84], ['2000-06-28', 93], ['2000-06-29', 85], ['2000-06-30', 73], ['2000-07-01', 83], ['2000-07-02', 125], ['2000-07-03', 107], ['2000-07-04', 82], ['2000-07-05', 44], ['2000-07-06', 72], ['2000-07-07', 106], ['2000-07-08', 107], ['2000-07-09', 66], ['2000-07-10', 91], ['2000-07-11', 92], ['2000-07-12', 113], ['2000-07-13', 107], ['2000-07-14', 131], ['2000-07-15', 111], ['2000-07-16', 64], ['2000-07-17', 69], ['2000-07-18', 88], ['2000-07-19', 77], ['2000-07-20', 83], ['2000-07-21', 111], ['2000-07-22', 57], ['2000-07-23', 55], ['2000-07-24', 60]]
      const dateList = data.map(function (item) {
        return item[0]
      })
      const valueList = data.map(function (item) {
        return item[1]
      })
      option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1
          }
        ],
        title: [
          {
            left: 'center',
            text: '校园新鲜事活跃用户走势'
          },
          {
            top: '55%',
            left: 'center',
            text: 'Gradient along the x axis'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateList
          },
          {
            data: dateList,
            gridIndex: 1
          }
        ],
        yAxis: [
          {},
          {
            gridIndex: 1
          }
        ],
        grid: [
          {
            bottom: '60%'
          },
          {
            top: '60%'
          }
        ],
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList
          },
          {
            type: 'line',
            showSymbol: false,
            data: valueList,
            xAxisIndex: 1,
            yAxisIndex: 1
          }
        ]
      }

      option && myChart.setOption(option)
    },
    async drawBottom () {
      const increaceUser = []
      const increaceTopic = []
      const increaceInvitation = []
      const day = []
      const { data: res } = await this.$http.get('dataVisual/SevenDayUserNum')
      const { data: res2 } = await this.$http.get('dataVisual/SevenDayTopicNum')
      const { data: res3 } = await this.$http.get('dataVisual/sevenDayInviteNum')
      console.log(res2)
      console.log(res3)
      res.data.reverse()
      res2.data.reverse()
      res3.data.reverse()
      for (const resKey in res.data) {
        day.push(res.data[resKey].day)
        increaceUser.push(res.data[resKey].inviteNum)
        increaceTopic.push(res2.data[resKey].inviteNum)
        increaceInvitation.push(res3.data[resKey].inviteNum)
      }

      // var chartDom = document.getElementById('main2')
      // var myChart = echarts.init(chartDom)
      // myChart.resize({
      //   height: 400,
      //   width: 1055
      // })
      // var option
      //
      // function randomData () {
      //   now = new Date(+now + oneDay)
      //   value = value + Math.random() * 21 - 10
      //   return {
      //     name: now.toString(),
      //     value: [
      //       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
      //       Math.round(value)
      //     ]
      //   }
      // }
      // const data = []
      // let now = new Date(2021, 12, 6)
      // const oneDay = 24 * 3600 * 100
      // let value = Math.random()
      // for (var i = 0; i < 1000; i++) {
      //   data.push(randomData())
      // }
      // option = {
      //   title: {
      //     text: '近30天用户活跃度动态显示',
      //     left: 'center'
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //     formatter: function (params) {
      //       params = params[0]
      //       var date = new Date(params.name)
      //       return (
      //         date.getDate() +
      //         '/' +
      //         (date.getMonth() + 1) +
      //         '/' +
      //         date.getFullYear() +
      //         ' : ' +
      //         params.value[1]
      //       )
      //     },
      //     axisPointer: {
      //       animation: false
      //     }
      //   },
      //   xAxis: {
      //     type: 'time',
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   yAxis: {
      //     type: 'value',
      //     boundaryGap: [0, '100%'],
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       name: 'Fake Data',
      //       type: 'line',
      //       showSymbol: false,
      //       data: data
      //     }
      //   ]
      // }
      // setInterval(function () {
      //   for (var i = 0; i < 5; i++) {
      //     data.shift()
      //     data.push(randomData())
      //   }
      //   myChart.setOption({
      //     series: [
      //       {
      //         data: data
      //       }
      //     ]
      //   })
      // }, 1000)
      //
      // option && myChart.setOption(option)
      var chartDom = document.getElementById('main2')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '用户、话题、帖子新增情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['用户新增量', '帖子新增量', '话题新增量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: day
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '用户新增量',
            type: 'line',
            stack: 'Total',
            data: increaceUser
          },
          {
            name: '帖子新增量',
            type: 'line',
            stack: 'Total',
            data: increaceTopic
          },
          {
            name: '话题新增量',
            type: 'line',
            stack: 'Total',
            data: increaceInvitation
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // // //, 用于改变面包屑导航栏
    changeBread () {
      document.getElementById('first').innerHTML = ' '
      document.getElementById('second').innerHTML = ' '
      document.getElementById('separate_1').innerHTML = ' '
      document.getElementById('separate_2').innerHTML = ' '
    },
    toTopicList () {
      this.$router.push('/topics/list')
    },
    toInvitationList () {
      this.$router.push('/invitations')
    },
    async getTopicTop10 () {
      const { data: res } = await this.$http.post('topic/selectTopicByAccurate', this.topic)
      if (res.status !== 200) {
        return this.$message.error('获取话题列表失败！')
      }
      this.topicList = res.data.list
    },
    async getInvitationTop10 () {
      const { data: res } = await this.$http.post('invitation/selectInviteByAccurate/', this.invitation)
      if (res.status !== 200) {
        return this.$message.error('获取贴子列表失败！')
      }
      this.inviList = res.data.list
    },
    async getTotalData () {
      const { data: res } = await this.$http.get('dataVisual/otherTotalNum')
      if (res.status !== 200) {
        return this.$message.error('获取数据失败！')
      }
      this.TopicTotal = res.data.TopicTotal
      this.inviteTotal = res.data.inviteTotal
      this.userTodayCount = res.data.userTodayCount
      this.userTotal = res.data.userTotal
    },
    getInvitationInfoDetail (id) {
      this.$router.push({
        path: '/invitations/content/',
        component: 'invitationContent',
        query: {
          inviId: id
        }
      })
    },
    async getTopicInvitation (topicId) {
      this.invitationListTopic = []
      this.things2.thing = topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      this.invitationListTopic = res.data.list
      this.invitationSize = res.data.total
    },
    showTopicInfo (item) {
      this.topic = item
      this.disabled = true
      this.getTopicInvitation2(item.topicId)
    },
    handleUserInvitationPageCurrentChange (newPage) {
      this.things2.page = newPage
      this.getTopicInvitation2()
    },
    async getTopicInvitation2 (topicId) {
      // this.dataInvitation = []
      // alert(1)
      this.things2.thing = this.topic.topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      console.log(res)
      this.invitationListTopic = res.data.list
      this.invitationSize = res.data.total
    },
    handClose () {
      this.disabled = false
    },
    async deleteTopic (id) {
      const { data: res } = await this.$http.get(`invitation/deleteInvite/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功！')
      this.getTopicInvitation2()
    }
  },
  mounted () {
    this.draw2()
    this.drawBottom()
    this.changeBread()
    this.getTotalData()
    this.getTopicTop10()
    this.getInvitationTop10()
  }
}
</script>
<style scoped>
@import "../../assets/css/topicDialog.css";
#top{
  width: 1055px;
  margin: auto;
}
#main{
  height: 800px;
  width: 600px;
  float: left;
  margin-top: 50px;
  overflow: hidden;
  margin-left: 30px;
}
#main2{
  height: 600px;
  width: 100%;
}
ul{
  margin: 0;
  padding: 0;
}
li{
  list-style-type:none;
  border-bottom: 1px solid #E4E6EB;
}
li:hover{
  /*background-color: #F7F7F7;*/
  cursor: pointer;
}
.TopTitle,li{
  height: 30px;
}
.rankNum1{
  font-size: 16px;
  font-weight: 700;
  color: red;
  /*float: left;*/
  display: inline;
  /*margin-top: 10px;*/
}
.rankNum2{
  font-size: 16px;
  font-weight: 700;
  color: #FF8103;
  /*float: left;*/
  margin-top: 3px;
  display: inline;
}
.topic{
  margin-left: 10px;
  color: #4A4A4A;
  font-size: 13px;
  line-height: 16px;
  display: inline;
}
.topic:hover{
  color: #409CFF;
}
.toTopicList{
  color: #939393;
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
  margin-top: 20px;
}
.toTopicList:hover{
  cursor: pointer;
  color: #AAA999;
}

.panel-group {
  margin-top: 18px;
}
.card-panel-col {
  margin-bottom: 32px;
}
.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
}
.card-panel-icon-wrapper {
  color: #fff;
}
.icon-people {
  background: #40c9c6;
}
.icon-message {
  background: #36a3f7;
}
.icon-money {
  background: #f4516c;
}
.icon-shoppingCard {
  background: #34bfa3;
}
.card-panel-icon-wrapper {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  transition: all 0.38s ease-out;
  border-radius: 6px;
}
/*.iconfont icon-liulan {*/
/*  float: left;*/
/*  font-size: 48px;*/
/*}*/
.card-panel-description {
  float: left;
  font-weight: bold;
  margin: 26px 0 0 70px;
}
.card-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  margin-bottom: 12px;
}
.card-panel-num {
  font-size: 20px;
}
</style>
